<template>
  <view class="content">
    <introduction :title="title" :list="listData"/>
    <view class="box">
      <Radar width="700" id="UdnjPnFTxTBwpNaepeXShMdYFXHJcCfG" :categories="categories" :chartData="chartData"/>
      <rank-line width="700" :totalScore="rank.totalScore" :honorScoreList="rank.honorScoreList"/>
      <my-tab :tabBars="localdata" :current="tabActive" @on-current-tab="handleChangeTab"
              @on-loadmore-tab="onLoadmoreTab">
        <view class="text-content">
          <text>该维度荣誉已有</text>
          <h4>{{ honorTotal }}个</h4>
        </view>
        <view class="text-content">
          <text>还可以考虑增加更多该维度的荣誉</text>
        </view>
      </my-tab>
      <tag :label-data="tagsData" @handle-tag-click="handleTagClick"/>
    </view>
    <up-popup :show="popupDisabled" :round="'33rpx'" @close="popupClose">
      <img class="image" :src="imgUrl+'2024-04-11/1712830521343WechatIMG147.jpg'" alt="" @tap="handleImgClick">
    </up-popup>
  </view>
</template>

<script setup>
import MyTab from "@/components/tabsCopy/index.vue";
import introduction from "./components/introduction.vue";
import Radar from "@/package_honour/pages/honour/components/radar.vue";
import rankLine from '@/package_honour/pages/honour/components/rank-line.vue'
import tag from "./components/tag.vue";
import {
  ref,
  onMounted,
  reactive
} from "vue";
import {
  getEnterpriseHonorScore,
  getDimensionalityRuleExplain
} from "@/api/honour/index.js"
import {
  onLoad
} from '@dcloudio/uni-app';
import {getEnterpriseAllHonourListApi} from "@/api/honour/enterprise-detail";
import {getUrlParamsInH5, getUrlParamsInWeixin} from "@/utils/utils";

let imgUrl = import.meta.env.VITE_APP_IMGURL
const tabActive = ref(0);
const content = ref();
const listData = ref({
  name: "贵州华泰智远大数据服务有限公司",
  state: "存续",
  label: [],
  stage: "稳步发展",
  raise: "规范度",
});
const allData = ref();
const contentData = ref();
const title = ref("");
const grade = ref("暂无等");
const localdata = ref([
  {
    name: "创新发展",
    id: 0,
    key: "cxfzGrade"
  },
  {
    name: "公司治理",
    id: 1,
    key: "gszlGrade"
  },
  {
    name: "市场营销",
    id: 2,
    key: "scyxGrade"
  },
  {
    name: "团队建设",
    id: 3,
    key: "tdjsGrade"
  },
  {
    name: "安全生产",
    id: 4,
    key: "lsscGrade"
  },
  {
    name: "社会责任",
    id: 5,
    key: "ppzrGrade"
  },
]);
const chartData = ref([
  {
    name: "该企业指数",
    data: []
  },
  {
    name: " 参考指数",
    data: []
  }
])
const categories = ref([])

const rank = reactive({
  totalScore: 0,
  honorScoreList: []
})
const honorTotal = ref(0)


function onLoadmoreTab() {
  console.log(11111111)

}

const popupDisabled = ref(false)
const curPopupTitle = ref('')
const handleTagClick = tag => {
  console.log(tag)
  curPopupTitle.value = tag.honorName
  popupDisabled.value = true
}

const popupClose = () => {
  popupDisabled.value = false
}

const handleImgClick = (tab) => {
  popupClose()
}

const enterpriseName = ref('')
const aqscTags = ref([]) // 安全生产
const cxfzTags = ref([]) // 创新发展
const gszlTags = ref([]) // 公司治理
const scyxTags = ref([]) // 市场营销
const shzrTags = ref([]) // 社会责任
const tdjsTags = ref([]) // 团队建设

const tagsData = ref([])
const getEnterpriseAllHonourList = async () => {
  const params = {
    enterpriseName: enterpriseName.value
  }
  const res = await getEnterpriseAllHonourListApi(params)
  const {code, data} = res
  if (code === 200) {
    const {aqscList, cxfzList, gszlList, scyxList, shzrList, tdjsList} = data
    aqscTags.value = aqscList
    cxfzTags.value = cxfzList
    gszlTags.value = gszlList
    scyxTags.value = scyxList
    shzrTags.value = shzrList
    tdjsTags.value = tdjsList
    honorTotal.value = cxfzList.filter(item => item.isExist).length
    tagsData.value = cxfzTags.value
  }
}

const handleChangeTab = tabIndex => {
  const curTab = localdata.value.find((item, index) => index === tabIndex)
  switch (curTab.name) {
    case '创新发展':
      tagsData.value = cxfzTags.value
      honorTotal.value = cxfzTags.value.filter(tag => tag.isExist).length
      break
    case '公司治理':
      tagsData.value = gszlTags.value
      honorTotal.value = gszlTags.value.filter(tag => tag.isExist).length
      break
    case '市场营销':
      tagsData.value = scyxTags.value
      honorTotal.value = scyxTags.value.filter(tag => tag.isExist).length
      break
    case '团队建设':
      tagsData.value = tdjsTags.value
      honorTotal.value = tdjsTags.value.filter(tag => tag.isExist).length
      break
    case '安全生产':
      tagsData.value = aqscTags.value
      honorTotal.value = aqscTags.value.filter(tag => tag.isExist).length
      break;
    case '社会责任':
      tagsData.value = shzrTags.value
      honorTotal.value = shzrTags.value.filter(tag => tag.isExist).length
      break;
    default:
      break;
  }
  if (allData.value) {
    if (allData.value[localdata.value[tabIndex].key]) {
      grade.value = allData.value[localdata.value[tabIndex].key]
    }
  }
}


onLoad((option) => {
  uni.pageScrollTo({
    scrollTop: 0,
    duration: 0
  })
  getDimensionalityRuleExplain().then((res) => {
    contentData.value = res.data
    handleChangeTab(0)
  })
  uni.setNavigationBarTitle({
    title: title.value
  })
  /* #ifndef MP-WEIXIN */
  enterpriseName.value = getUrlParamsInH5()?.industryBigType
  /* #endif */

  /* #ifdef MP-WEIXIN */
  enterpriseName.value = getUrlParamsInWeixin()?.industryBigType
  /* #endif */

  title.value = option.title;
  listData.value.name = option.industryBigType


  getEnterpriseHonorScore(
      option.industryBigType
  ).then((res) => {
    console.log(res)
    allData.value = res.data
    let otherdata = res.data.honorScoreEntity

    let hashMap = {
      "创新发展": "cxfz",
      "公司治理": "gszl",
      "社会责任": "ppzr",
      "安全生产": "lssc",
      "团队建设": "tdjs",
      "市场营销": "scyx"
    }
    let GradeMap = {
      "创新发展": "cxfzGrade",
      "公司治理": "gszlGrade",
      "社会责任": "ppzrGrade",
      "安全生产": "lsscGrade",
      "团队建设": "tdjsGrade",
      "市场营销": "scyxGrade"
    }
    let gradeArr = ['C', 'B', 'A', 'A+', 'S']

    res.data.honorScoreMaxVo.forEach(ele => {
      let grade = allData.value[GradeMap[ele.dimensionName]] || ""
      let gradeOther = otherdata[GradeMap[ele.dimensionName]] || ""
      categories.value.push(ele.dimensionName + '\n' + grade)
      let allScore = gradeArr.findIndex(v => v === grade) + 1
      let otherScore = gradeArr.findIndex(v => v === gradeOther) + 1
      chartData.value[0].data.push(((allScore * 2) / 10))
      chartData.value[1].data.push(((otherScore * 2) / 10))
    });
    if (res.data.appEnterpriseHonorInfoList) {
      listData.value.label = res.data.appEnterpriseHonorInfoList.map((o) => {
        return o.enterpriseHonor
      })

    }
    rank.totalScore = allData.value?.totalScore || 0
    rank.honorScoreList = allData.value?.honorScoreStageConfigEntity || []
  })
  getEnterpriseAllHonourList()
})
</script>

<style lang="less" scoped>
@import "@/static/style/global.less";

.content {
  min-height: 100vh;
  background-color: transparent;
  overflow-x: hidden;

  .box {
    .sub {
      font-family: "ali";
      font-weight: 400;
      font-size: @font-size-23;
      color: @color-grey;
    }

    .grade {
      color: @color-green;
    }

    .tabs {
      :deep(.uni-scroll-view-content) {
        height: initial;
      }

      .text-content {
        &:first-child {
          margin-top: 50rpx;
          display: flex;
          font-family: 'ali-l';
          letter-spacing: 2rpx;
          font-size: 31rpx;

          text {
            color: #68696A;
          }

          h4 {
            font-family: 'ali-m';
            margin-left: 5rpx;
            color: #00B588;
          }
        }

        &:last-child {
          margin-top: 23rpx;
          font-family: 'ali-l';
          font-size: 23rpx;
          font-weight: 400;
          color: #9b9b9b;
        }
      }
    }
  }

  .u-popup {
    .image {
      width: 100%;
    }
  }
}
</style>
